<template>
  <el-row :gutter="20" class="panel-group sw-panel-group">
    <!-- <el-col v-if="userType == 'all'" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">今日退出PV</div>
          <count-to :start-val="0" :end-val="homeTopInfo.ex" :duration="1000" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
    <!-- <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <router-link to="/online">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">今日在线渠道数量</div>
            <count-to :start-val="0" :end-val="homeTopInfo.on_line" :duration="1000" class="card-panel-num" />
          </div>
        </div>
      </router-link>
    </el-col> -->
    <!-- <el-col v-if="userType == 'agency'" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text">渠道数量</div>
          <count-to :start-val="0" :end-val="homeTopInfo.channel_sum" :duration="1000" class="card-panel-num" />
        </div>
      </div>
    </el-col> -->
    <!-- <el-col v-if="userType == 'channel'" :xs="12" :sm="12" :lg="4" class="card-panel-col">
      <div class="card-panel">
        <div class="card-panel-description">
          <div class="card-panel-text"  >渠道号</div>
          <h2>{{userInfo.username}}</h2>
        </div>
      </div>
    </el-col> -->
    <el-col :span="4" v-if="userType == 'all'">
      <div class="card" @click="goline()">
        <div class="card-body">
          <h4 class="card-title">今日在线渠道数量</h4>
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="text-dark font-weight-bold">
              {{ homeTopInfo.on_line ? Math.ceil(homeTopInfo.on_line) : 0 }}
            </h2>
          </div>
          <img src="./1.png" alt="" />
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">今日UV</h4>
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="text-dark font-weight-bold">
              {{ homeTopInfo.uv }}
            </h2>
          </div>
          <img src="./2.png" alt="" />
        </div>
      </div>
    </el-col>
    <el-col :span="4" v-if="userType == 'all'">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">今日PV</h4>
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="text-dark font-weight-bold">
              {{ homeTopInfo.pv }}
            </h2>
          </div>
          <img src="./3.png" alt="" />
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">
            {{ userType == "all" ? "今日花费" : "今日收益" }}
          </h4>
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="text-dark font-weight-bold">
              {{ homeTopInfo.day_expend }}
            </h2>
          </div>
          <img src="./4.png" alt="" />
        </div>
      </div>
    </el-col>

    <el-col :span="4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">
            {{ userType == "all" ? "总花费" : "总收益" }}
          </h4>
          <div class="d-flex justify-content-between align-items-center">
            <h2 class="text-dark font-weight-bold">
              {{ homeTopInfo.all_expend }}
            </h2>
          </div>
          <img src="./1.png" alt="" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  components: {
    CountTo,
  },
  props: {
    homeTopInfo: {
      type: Object,
      default: {
        all_expend: 0.0,
        day_expend: 0.0,
        on_line: 0,
        ex: 0,
        pv: 0,
        uv: 0,
      },
    },
  },
  data() {
    return {
      userInfo: this.$store.state.user.name,
      userType: this.$store.state.user.type,
    };
  },
  mounted() {},
  methods: {
    goline() {
      if (this.userType == "all") {
        this.$router.push("/online");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// new
.card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e7eaed;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  img {
    width: 100%;
  }
  .card-body {
    padding: 1.75rem 1.75rem;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
  }
  .card-title {
    color: #00000073;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    font-size: 13px;
    font-weight: 500;
  }
  .text-dark {
    color: #001737 !important;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-col-4 {
  width: 20%;
}
.panel-group {
  margin-top: 10px;
  margin-left: 0px;
  margin-bottom: 0px;
  .card-panel-col {
    // background-color: white;
  }

  .card-panel {
    // height: 108px;
    /*cursor: pointer;*/
    font-size: 14px;
    position: relative;
    overflow: hidden;
    color: #60a46f;
    background: #ffffff;
    // border: 1px solid #a8b3c4 ;
    // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    // box-shadow: 4px 4px 20px #DEDDE5;

    // border-radius: 10px;

    /*&:hover {*/
    /*  .card-panel-icon-wrapper {*/
    /*    color: #fff;*/
    /*  }*/

    /*  .icon-people {*/
    /*    background: #40c9c6;*/
    /*  }*/

    /*  .icon-message {*/
    /*    background: #36a3f7;*/
    /*  }*/

    /*  .icon-money {*/
    /*    background: #f4516c;*/
    /*  }*/

    /*  .icon-shopping {*/
    /*    background: #34bfa3*/
    /*  }*/
    /*}*/

    /*.icon-people {*/
    /*  color: #40c9c6;*/
    /*}*/

    /*.icon-message {*/
    /*  color: #36a3f7;*/
    /*}*/

    /*.icon-money {*/
    /*  color: #f4516c;*/
    /*}*/

    /*.icon-shopping {*/
    /*  color: #34bfa3*/
    /*}*/

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      box-sizing: border-box;
      padding: 0px 10px;
      font-weight: bold;
      margin: 26px 0;
      text-align: left;

      .card-panel-text {
        line-height: 18px;
        color: #a8b3c4;
        font-size: 22px;
        margin-bottom: 12px;
        text-align: center;
        div {
          font-size: 12px;
          padding-top: 10px;
        }
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  /*.card-panel-description {*/
  /*  display: none;*/
  /*}*/

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
